<template>
	<scroll-view scroll-y="true" style="height: 100%;">
		<!-- 代表一个新闻 -->
		<view v-for="news in newsList" class = "news_view">
			<!-- 显示标题和封面 -->
			<view style="display: flex;">
				<!-- 新闻标题 -->
				<view style="font-size: 38rpx;">
					{{news.subject}}
				</view>
				<!-- 新闻封面 -->
				<view>
					<img :src="news.fengmian" class="img_cls">
				</view>
			</view>
			<!-- 展示新闻的发布时间 -->
			<view style="padding-left: 20rpx; color: #989898; font-size: 30rpx;">
				{{news.createTime}}
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name:"news_list",
		props: {
			//新闻分类id
			tid: {
				type: Number
			}
		},
		//*****
		//vue里面，组件和页面是一样
		//uniapp里面，
		//    页面的加载触发方法是 - onLoad
		//    组件的加载触发方法是 - mounted
		mounted() {
			console.log("组件加载了！  " + this.tid);
			this.queryNewsByTid();
		},
		data() {
			return {
				//新闻列表
				newsList: []
			};
		},
		methods:{
			//根据tid查询新闻列表
			queryNewsByTid(){
				this.$.ajax({
					url: "/newsInfo/listByTid",
					data: {
						tid: this.tid
					},
					success: (result) => {
						this.newsList = result;
					}
				});
			}
		}
	}
</script>

<style>
	.img_cls {
		width: 300rpx;
		height: 200rpx;
		background-color: aquamarine;
	}
	
	.news_view {
		background-color: white;
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 15rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
</style>